@charset "utf-8";
.indexBody{
  background:url(trs_index_bg.png) repeat-y  10% 110%;
}
.container{
  margin-top:20px;
}
.topNav{
  width:100%;
  position: relative;
}
.topNav li{
  width:280px;
  height:84px;
  float:left;
  background:url(trs_index_img01.png);
  margin-right:20px;
  color:#fff;
  padding:18px 30px;
  box-sizing: border-box;
  box-shadow: 0 0 24px 0 rgba(24,24,24,0.4);
  border-radius: 6px;
}
.topNav li.last{
  margin-right:0;
}
.topNav li i{
  display:block;
  width:50px;
  height:50px;
  float:left;
}
.topNav li i.ico01{
  background:url(trs_icon_baodan.png) no-repeat;
}
.topNav li i.ico02{
  background:url(trs_icon_lipei.png) no-repeat;
}
.topNav li i.ico03{
  background:url(trs_icon_baoquan.png) no-repeat;
}
.topNav li i.ico04{
  background:url(trs_icon_xuqi.png) no-repeat;
}
.topNav li h2{
  float:left;
  margin-left:18px;
  margin-bottom:6px;
  font-size:22px;
  margin-top:-2px;
}
.topNav li p{
  float:left;
  margin-left:18px;
  font-size:14px;
}
.topNav li p a{
  color:#fff;
}

.products{
  margin-top:46px;
}

.products h2.title{
  font-size: 36px;
  color: #099742;
  letter-spacing: 0.6px;
  text-align: center;
  line-height: 36px;
  font-weight: 700;
}
.products h2.title span{
  font-size: 14px;
  color: #ABABAB;
  letter-spacing: 0.23px;
  text-align: center;
  line-height: 20px;
  font-weight: 400;
  display:block;
  margin-top:11px;
}
.products ul{
  margin-top:24px;
}
.products li{
  width:280px;
  height:410px;
  float:left;
  margin-right:20px;
  border-radius: 15px;
  background:#fff;
  box-shadow: 0px 0px 12px 0px rgba(195,195,195,0.5);
  position: relative;
  overflow: hidden;
  transition: width .5s linear 0s;
}
.products li.i01{
  background:url(trs_biga.jpg) 280px 0;
}
.products li.i02{
  background:url(trs_bigb.jpg) 280px 0;
}
.products li.i03{
  background:url(trs_bigc.jpg) 280px 0;
}
.products li.active{
  width:580px;
  height:410px;
  box-shadow: 0px 28px 32px 0px #ddf1e4;
  background-position: 0 0;
  transition: width .5s linear 0s;
}
.products li.active h2{
  width:100%;
}
.products li.last{
  margin-right:0;
}
.products .more a{
  display: block;
  width:110px;
  height:32px;
  border: 1px solid rgba(22,174,102,1);
  font-size: 14px;
  color: #16AE66;
  letter-spacing: 0.23px;
  text-align: center;
  line-height: 32px;
  font-weight: 400;
  margin:36px auto;
}
.products li>*{
  position: absolute;
  left:24px;
}
.products li i{
  width:90px;
  height:22px;
  border-radius: 22px;
  display: block;
  background:#ffad67;
  color:#fff;
  text-align: center;
  line-height:22px;
  top:20px;
}
.products li h2{
  font-size:28px;
  width:240px;
  color:#00b15e;
  top:60px;
}
.products li p{
  font-size:16px;
  width:310px;
  color:#7a7b7a;
  top:173px;
  line-height:28px;
  display:none;
}
.products li a{
  font-size:14px;
  width:82px;
  height:22px;
  top:370px;
  line-height:22px;
  color:#fff;
  background:#18ae66;
  border-radius: 22px;
  text-align: center;
  display:none;
}
.products li.active p,.products li.active a{
  display:block;
}


.news{
  margin-top:89px;
  margin-bottom:111px;
}
.news .more a{
  display: block;
  width:110px;
  height:32px;
  border: 1px solid rgba(22,174,102,1);
  
  font-size: 14px;
  color: #16AE66;
  letter-spacing: 0.23px;
  text-align: center;
  line-height: 32px;
  font-weight: 400;
  margin:36px auto;
}

.news h2.title{
  
  font-size: 36px;
  color: #099742;
  letter-spacing: 0.6px;
  text-align: center;
  line-height: 36px;
  font-weight: 700;
}
.news h2.title span{
  
  font-size: 14px;
  color: #ABABAB;
  letter-spacing: 0.23px;
  text-align: center;
  line-height: 20px;
  font-weight: 400;
  display:block;
  margin-top:11px;
}
.news .tab{
  text-align: center;
  margin-top:16px;
  margin-bottom:28px;
}
.news .tab p{
  width:110px;
  height:36px;
  border:1px solid #4BB439;
  line-height:36px;
  display:inline-block;
  font-size: 16px;
  color: #4BB439;
  letter-spacing: 0.27px;
  text-align: center;
  font-weight: 400;
  cursor: pointer;
  border-radius: 3px;
}
.news .tab p.active{
  background: #16AE66;
  color:#fff;
}
.news .tab p:first-child{
  margin-right:20px;
}
.news .content .item{
  display:none;
}
.news .content .item.active{
  display:block;
}
.news .content .item ul{
  width:548px;
}
.news .content .item ul.fl{
  float:left;
}
.news .content .item ul.fl li{
  height:84px;
}
.news .content .item ul.fl li:first-child{
  border-bottom:1px solid #D8D2D2;
  margin-bottom:12px;
}
.news .content .item ul.fl span{
  display: block;
  width:72px;
  height:72px;
  border-radius: 8px;
  float:left;
  text-align: center;
  font-size: 36px;
  color: #099742;
  letter-spacing: 0;
  line-height: 30px;
  font-weight: 200;
  background:rgba(9,151,66,.13);
  padding-top:10px;
  box-sizing: border-box;
  margin-right:16px;
}
.news .content .item ul.fl span i{
  display: block;
  font-size:12px;
}
.news .content .item ul.fl h2{
  font-size: 16px;
  color: #000000;
  letter-spacing: 0;
  font-weight: bold;
  margin-bottom:5px;
}
.news .content .item ul.fl p{
  font-size: 12px;
  color: #797979;
  letter-spacing: 0;
  line-height: 22px;
  font-weight: 400;
}
.news .content .item ul.fl p a{
  color:#16AE66;
}
.news .content .item ul.fr{
  float:right;
}
.news .content .item ul.fr li{
  
  font-size: 14px;
  color: #171717;
  letter-spacing: 0;
  line-height: 30px;
  font-weight: 400;
  text-indent:20px;
  position: relative;
}
.news .content .item ul.fr li::before{
  content:'';
  width:5px;
  height:5px;
  border-radius: 50%;
  background:#16AE66;
  position: absolute;
  top:12px;
  left:0;
}
.news .content .item ul.fr li a{
  width:460px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color:#171717;
}
.news .content .item ul.fr li span{
  float:right;
  color:#797979;
}





.aboutUs{
  width:1180px;
  overflow: hidden;
  margin:0 auto;
}
.aboutUs .fl{
  width:590px;
  height:330px;
  float:left;
}
.aboutUs .fr{
  width:557px;
  height:330px;
  float:right;
}
.aboutUs .fr h2{
  
  font-size: 36px;
  color: #099742;
  letter-spacing: 0.6px;
  line-height: 36px;
  font-weight: 400;
}
.aboutUs .fr h2 span{
  
  font-size: 16px;
  color: #F7CEA8;
  letter-spacing: 0.27px;
  line-height: 20px;
  font-weight: 400;
  display:block;
  margin-top:10px;
}

.aboutUs .fr p{
  
  font-size: 14px;
  color: #343434;
  letter-spacing: 0;
  text-align: justify;
  line-height: 26px;
  font-weight: 200;
  margin-top:15px;
}
.aboutUs .fr .btn{
  width:110px;
  height:32px;
  border: 1px solid rgba(22,174,102,1);
  display:block;
  line-height:32px;
  text-align: center;
  
  font-size: 14px;
  color: #16AE66;
  letter-spacing: 0.23px;
  text-align: center;
  line-height: 32px;
  font-weight: 400;
  margin-top:16px;
}
.aboutUs .fr ul{
  width:100%;
  height:77px;
  border-top: 1px solid rgba(210,210,210,1);
  margin-top:16px;
  
}
.aboutUs .fr ul li{
  float:left;
  margin-top:16px;
  position: relative;
  cursor: pointer;
}
.aboutUs .fr ul li.i01{
  width:177px;
}
.aboutUs .fr ul li.i02{
  width:200px;
  padding-left:17px;
  box-sizing: border-box;
}
.aboutUs .fr ul li.i03{
  width:170px;
  float:right;
}
.aboutUs .fr ul li::before{
  content:'';
  width:1px;
  height:63px;
  border-right:1px dotted #E4E4E4;
  position: absolute;
  right:-4px;
  top:-3px;
}
.aboutUs .fr ul li.i02::before{
  right:3px;
}
.aboutUs .fr ul li.i03:before{
  display:none;
}

.aboutUs .fr ul li img{
  width:107px;
  height:60px;
  vertical-align: middle;
  box-sizing: border-box;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.aboutUs .fr ul li span{
  
  font-size: 18px;
  color: #343434;
  letter-spacing: 0;
  line-height: 26px;
  font-weight: 400;
  margin-left:4px;
}

.aboutUs .fr ul li.active img{
  border:2px solid #51AB6D;
  -webkit-filter: initial;
  filter:initial;
}
.aboutUs .fr ul li.active span{
  color:#51AB6D;
}



.app{
  width:1180px;
  height:500px;
  margin:53px auto;
  background:url(trs_appbg.png) center;
  border-radius: 16px;
  box-shadow: 0 0 24px 0 rgba(24,24,24,0.1);
  position: relative;
}
.app .nav{
  width:200px;
  position: absolute;
  top:40px;
  left:0;
}
.app .nav li{
  width:200px;
  height:90px;
  margin-bottom:20px;
  color:#fff;
  font-size:20px;
  font-weight:bold;
  padding:30px 22px;
  background:#ccc;
  box-sizing: border-box;
  border-radius: 0 10px 10px 0;
  cursor:pointer;
}
.app .nav li span{
  display:block;
}
.app .nav li.active{
  box-shadow: 7px 3px 14px 0 rgba(18,128,38,0.68);
}

.app .nav li:nth-child(1){
  background:url(b1.png)
}
.app .nav li:nth-child(2){
  background:url(b2.png)
}
.app .nav li:nth-child(3){
  background:url(b3.png)
}
.app .nav li:nth-child(4){
  background:url(b4.png)
}

.app .nav li.active:nth-child(1){
  background:url(a1.png)
}
.app .nav li.active:nth-child(2){
  background:url(a2.png)
}
.app .nav li.active:nth-child(3){
  background:url(a3.png)
}
.app .nav li.active:nth-child(4){
  background:url(a4.png)
}




.app .txt{
  position: absolute;
  top:28px;
  left:282px;
}
.app .txt .item{
  display:none;
}
.app .txt .item.active{
  display:block;
}
.app .txt h2{
  font-size: 40px;
  color: #099742;
  line-height: 53px;
  font-weight: bold;
  font-style:italic;
}
.app .txt h2.t30{
  margin-top:30px;
  font-family: 'YouSheBiaoTiHei';
  font-weight: 400;
}
.app .txt h2 span{
  display:block;
}
.app .txt ul.l1{
  margin-top:20px;
}
.app .txt ul.l1 li{
  width:300px;
  font-size:18px;
  margin-bottom:10px;
  position: relative;
  text-indent:40px;
}
.app .txt ul.l1 li::after{
  content:'';
  width:26px;
  height:26px;
  background:url(trs_index_ico.png) no-repeat;
  background-size:contain;
  position: absolute;
  top:2px;
  left:0;
}
.app .txt ul.l2{
  margin-top:20px;
}
.app .txt ul.l2 li{
  width:300px;
  font-size:16px;
  margin-bottom:10px;
  position: relative;
  text-indent:15px;
  position: relative;
}
.app .txt ul.l2 li::before{
  content:'';
  width:5px;
  height:5px;
  border-radius: 50%;
  background:#D66D0D;
  position: absolute;
  top:8px;
  left:0;
}
.app .imgbox{
  margin-top:200px !important;
}
.app .imgbox img{
  position: relative;
  bottom:-8px;
}
.app .ctx{
  margin-top:90px;
}
.app .ctx p{
  font-size:18px !important;
  color:#2C2C2C !important;
  margin-bottom:30px !important;
}
.app .ctx p i{
  font-size:40px;
  color: #099742;
  font-family: 'YouSheBiaoTiHei';
}
.app .imgbox span{
  font-size:18px;
  color:#2C2C2C;
}
.app .txt p{
  font-size: 14px;
  color: #6E6E6E;
  line-height:22px;
  font-weight:400;
  margin-top:8px;
  margin-bottom:14px;
}
.app .txt img{
  width:109px;
  height:109px;
}
.app .img{
  position: absolute;
  right:73px;
  top:21px;
  display:none;
}
.app .img:first-child{
  display:block;
}

.app h3{
  margin-top:30px;
  font-size:24px;
  color:#D66D0D;
}

.effect{background: url(bg_phone_circular.png) no-repeat center center/75%  ; width: 500px;height: 500px;box-sizing: border-box;position: relative;}
.effect .phoneBox{height: 441px;width: 241px;position: absolute;transform: translate(-50%,-50%);top: 50%;left: 50%;z-index:2}
.effect .phoneBox .phoneImg{height: 100%;width: 100%;transition: all .225s;transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55);}
.effect .phoneBox:hover .phoneImg{filter:blur(1px) brightness(80%);transform: rotate(13deg) rotatex(-9deg) rotatey(37deg) scale(.98);}
.effect .phoneBox .ic{position: absolute;transition: all .225s;transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55);display: block;perspective: 1000px;transform: rotate(13deg) rotatex(-9deg) rotatey(37deg) scale(1.1);opacity: 0;}
.effect .phoneBox:hover .ic{transform: rotate(13deg) rotatex(-9deg) rotatey(37deg) scale(1.1);opacity: 1}
.effect .phoneBox .ic_button_group{top: 139px;left:8px;width: 241px;transform: scale(0.76);z-index:3}
.effect .phoneBox .ic_news{top: 265px;left:-27px;width: 241px;transform: scale(0.68);z-index:4}

.effect3 .phoneBox .ic_button_group{top: 85px;left:22px;width: 238px;transform: scale(0.76);z-index:3;border-radius: 12px}
.effect3 .phoneBox .ic_news{top: 200px;left:-15px;width: 241px;transform: scale(0.68);z-index:4;border-radius: 12px}

.effect4 .phoneBox .ic_button_group{top: 100px;left:15px;width: 241px;transform: scale(0.76);z-index:3}
.effect4 .phoneBox .ic_news{top: 210px;left:-18px;width: 241px;transform: scale(0.68);z-index:4}